<template>
  <h1>{{person.name}}</h1>
  <h1>{{person.age}}</h1>
  <h1>{{person.job.type}}</h1>
  <h1>{{person.job.salary}}</h1>
  <h1>{{person.hobby}}</h1>
  <h1 v-show="person.sex">{{person.sex}}</h1>
  <button @click="say">say</button>
  <button @click="addSex">addSex</button>
  <button @click="deleteSex">deleteSex</button>
</template>

<script>
  import {reactive} from 'vue'
  export default {
    name: 'App',
    setup(){
      let person = reactive({
        name:"zhangsan",
        age:18,
        job :({
          type:"vue",
          salary:"30k",
        }),
        hobby :(['学习','看书'])
      })
      function say(){
        person.name ="wangwu"
        person.age = 99
        person.job.type="前端工程师"
        person.job.salary="60k"
        person.hobby[0]="教书"
      }
      function addSex(){
        person.sex = "男"
      }
      function deleteSex(){
        delete person.sex
      }
      const person2 = {
        name:"zhangsan",
        age:18,
      }
      // const p = new Proxy(person2,{
      //   get(target,propName){
      //     return target[propName]
      //   },
      //   set(target,propName,value){
      //     target[propName] = value
      //   },
      //   deleteProperty(target,propName){
      //     delete target[propName]
      //   }
      // })  
      //Reflect是window.Reflect
      //反射
      console.log(Reflect.get(person2,"name"))
      // Reflect重写了Object上面的很多方法
      // 好处是可以省掉一些try catch
      const x1 = Reflect.defineProperty(person2,"name",{})
      if(x1){
        console.log("success")
      }else{
        console.log("no success")
      }
      //vue3是借助了Reflect的get，set，deleteProperty来操作的读写增删
      const p = new Proxy(person2,{
        get(target,propName){
          return Reflect.get(target,propName)
        },
        set(target,propName,value){
          Reflect.set(target,propName,value)
        },
        deleteProperty(target,propName){
          return Reflect.deleteProperty(target,propName)
        }
      })  
      return {
        person,
        say,
        addSex,
        deleteSex,
      }
    },
  }
</script>
